<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500">

    </canvas>

    <script>
        var canvas = document.getElementById("canvas")

        /** @type {CanvasRenderingContext2D} */
        var ctx = canvas.getContext("2d");
        // ctx.moveTo(10, 10) //设置起点
        // ctx.lineTo(100, 100)
        // ctx.stroke()
        // ctx.strokeRect(50, 50, 200, 200)
        // ctx.clearRect(50, 50, 200, 200)
        ctx.arc(100, 100, 90, 0,degToArc(70))
        ctx.closePath()
        ctx.stroke()
        function degToArc(num) {
            return (Math.PI / 180) * num
        }

        function myRect(ctxTmp, x, y, w, h) {
            ctxTmp.moveTo(x, y)
            ctxTmp.lineTo(x + w, y)
            ctxTmp.lineTo(x + w, y + h)
            ctxTmp.lineTo(x, y + h)
            ctxTmp.lineTo(x, y)
            ctx.stroke()


        }
        // myRect(ctx, 50, 50, 200, 200)
        // if(canvas.getContext){
        //     console.log("surport canvas");
        // } else {
        //     console.log("don't surport");
        // }
    </script>
</body>

</html>